/* ==================
         开关
 ==================== */

switch,
checkbox,
radio {
    position: relative;
}

switch::after,
switch::before {
    font-family: "cuIcon";
    content: "\e645";
    position: absolute;
    color: #ffffff !important;
    top: 0%;
    left: 0;
    font-size: 26*1upx;
    line-height: 26px;
    width: 50%;
    text-align: center;
    pointer-events: none;
    transform: scale(0, 0);
    transition: all 0.3s ease-in-out 0s;
    z-index: 9;
    bottom: 0;
    height: 26px;
    margin: auto;
}

switch::before {
    content: "\e646";
    right: 0;
    transform: scale(1, 1);
    left: auto;
}

switch[checked]::after,
switch.checked::after {
    transform: scale(1, 1);
}

switch[checked]::before,
switch.checked::before {
    transform: scale(0, 0);
}

/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
    font-family: "cuIcon";
    content: "\e645";
    position: absolute;
    color: #ffffff !important;
    top: 50%;
    margin-top: -8px;
    right: 5px;
    font-size: 32*1upx;
    line-height: 16px;
    pointer-events: none;
    transform: scale(1, 1);
    transition: all 0.3s ease-in-out 0s;
    z-index: 9;
}

radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
    margin: 0;
    width: 24px;
    height: 24px;
}

checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
    border-radius: 100*1upx;
}

/* #endif */

switch[checked]::before {
    transform: scale(0, 0);
}

switch .wx-switch-input,
switch .uni-switch-input {
    border: none;
    padding: 0 24px;
    width: 48px;
    height: 26px;
    margin: 0;
    border-radius: 100*1upx;
}

switch .wx-switch-input:not([class*="bg-"]),
switch .uni-switch-input:not([class*="bg-"]) {
    background: #8799a3 !important;
}

switch .wx-switch-input::after,
switch .uni-switch-input::after {
    margin: auto;
    width: 26px;
    height: 26px;
    border-radius: 100*1upx;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    transform: scale(0.9, 0.9);
    transition: all 0.1s ease-in-out 0s;
}

switch .wx-switch-input.wx-switch-input-checked::after,
switch .uni-switch-input.uni-switch-input-checked::after {
    margin: auto;
    left: 22px;
    box-shadow: none;
    transform: scale(0.9, 0.9);
}

radio-group {
    display: inline-block;
}

switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before,
switch.radius .uni-switch-input::after,
switch.radius .uni-switch-input,
switch.radius .uni-switch-input::before {
    border-radius: 10*1upx;
}

switch .wx-switch-input::before,
radio.radio::before,
checkbox .wx-checkbox-input::before,
radio .wx-radio-input::before,
switch .uni-switch-input::before,
radio.radio::before,
checkbox .uni-checkbox-input::before,
radio .uni-radio-input::before {
    display: none;
}

radio.radio[checked]::after,
radio.radio .uni-radio-input-checked::after {
    content: "";
    background-color: transparent;
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 200*1upx;
    /* #ifndef MP */
    border: 7px solid #ffffff !important;
    /* #endif */

    /* #ifdef MP */
    border: 8px solid #ffffff !important;
    /* #endif */
}

.switch-sex::after {
    content: "\e71c";
}

.switch-sex::before {
    content: "\e71a";
}

.switch-sex .wx-switch-input,
.switch-sex .uni-switch-input {
    background: #e54d42 !important;
    border-color: #e54d42 !important;
}

.switch-sex[checked] .wx-switch-input,
.switch-sex.checked .uni-switch-input {
    background: $tl-color-primary !important;
    border-color: $tl-color-primary !important;
}

switch.red[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input,
switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input {
    background-color: #e54d42 !important;
    border-color: #e54d42 !important;
    color: #ffffff !important;
}

switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input,
switch.orange.checked .uni-switch-input,
checkbox.orange.checked .uni-checkbox-input,
radio.orange.checked .uni-radio-input {
    background-color: #f37b1d !important;
    border-color: #f37b1d !important;
    color: #ffffff !important;
}

switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input,
switch.yellow.checked .uni-switch-input,
checkbox.yellow.checked .uni-checkbox-input,
radio.yellow.checked .uni-radio-input {
    background-color: #fbbd08 !important;
    border-color: #fbbd08 !important;
    color: #333333 !important;
}

switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input,
switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input {
    background-color: #8dc63f !important;
    border-color: #8dc63f !important;
    color: #ffffff !important;
}

switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input,
radio[checked] .wx-radio-input,
switch.green.checked .uni-switch-input,
switch.checked .uni-switch-input,
checkbox.green.checked .uni-checkbox-input,
checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input {
    background-color: #39b54a !important;
    border-color: #39b54a !important;
    color: #ffffff !important;
    border-color: #39B54A !important;
}

switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input,
switch.cyan.checked .uni-switch-input,
checkbox.cyan.checked .uni-checkbox-input,
radio.cyan.checked .uni-radio-input {
    background-color: #1cbbb4 !important;
    border-color: #1cbbb4 !important;
    color: #ffffff !important;
}

switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input,
switch.blue.checked .uni-switch-input,
checkbox.blue.checked .uni-checkbox-input,
radio.blue.checked .uni-radio-input {
    background-color: $tl-color-primary !important;
    border-color: $tl-color-primary !important;
    color: #ffffff !important;
}

switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input,
switch.purple.checked .uni-switch-input,
checkbox.purple.checked .uni-checkbox-input,
radio.purple.checked .uni-radio-input {
    background-color: #6739b6 !important;
    border-color: #6739b6 !important;
    color: #ffffff !important;
}

switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input,
switch.mauve.checked .uni-switch-input,
checkbox.mauve.checked .uni-checkbox-input,
radio.mauve.checked .uni-radio-input {
    background-color: #9c26b0 !important;
    border-color: #9c26b0 !important;
    color: #ffffff !important;
}

switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input,
switch.pink.checked .uni-switch-input,
checkbox.pink.checked .uni-checkbox-input,
radio.pink.checked .uni-radio-input {
    background-color: #e03997 !important;
    border-color: #e03997 !important;
    color: #ffffff !important;
}

switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input,
switch.brown.checked .uni-switch-input,
checkbox.brown.checked .uni-checkbox-input,
radio.brown.checked .uni-radio-input {
    background-color: #a5673f !important;
    border-color: #a5673f !important;
    color: #ffffff !important;
}

switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input,
switch.grey.checked .uni-switch-input,
checkbox.grey.checked .uni-checkbox-input,
radio.grey.checked .uni-radio-input {
    background-color: #8799a3 !important;
    border-color: #8799a3 !important;
    color: #ffffff !important;
}

switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input,
switch.gray.checked .uni-switch-input,
checkbox.gray.checked .uni-checkbox-input,
radio.gray.checked .uni-radio-input {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
    color: #333333 !important;
}

switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input,
switch.black.checked .uni-switch-input,
checkbox.black.checked .uni-checkbox-input,
radio.black.checked .uni-radio-input {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #333333 !important;
}
